我尝试在另一个 div 内的 div 上添加边距值。除了最高值外，一切正常，它似乎被忽略了。但为什么？
我所期望的：
我得到什么：
代码：
#outer { width: 500px; height: 200px; background: #FFCCCC; margin: 50px auto 0 auto; display: block; } #inner { background: #FFCC33; margin: 50px 50px 50px 50px; padding: 10px; display: block; } <div id="outer"> <div id="inner"> Hello world! </div> </div>
W3Schools没有解释为什么 margin 会这样。
您实际上看到元素的上边距折叠到#inner元素的上边缘，只留下边距完好无损（尽管图像中未显示）。两个框的上边缘彼此齐平，因为它们的边距相等。#outer``#outer
#inner
#outer``#outer
以下是 W3C 规范中的相关要点：
8.3.1 折叠边距 在 CSS 中，两个或多个框（可能是或不是兄弟）的相邻边距可以组合形成一个边距。以这种方式组合的边距称为 折叠 边距，由此产生的组合边距称为 折叠边距 。 相邻的垂直边距折叠 […] 两个边距 相邻 当且仅当： 两者都属于参与相同块格式化上下文的流入块级框 没有线框，没有间隙，没有填充，没有边框将它们分开 两者都属于垂直相邻的框边，即形成以下对之一： 一个盒子的上边距和它的第一个流入孩子的上边距
在 CSS 中，两个或多个框（可能是或不是兄弟）的相邻边距可以组合形成一个边距。以这种方式组合的边距称为 折叠 边距，由此产生的组合边距称为 折叠边距 。
相邻的垂直边距折叠 […]
两个边距 相邻 当且仅当：
您可以执行以下任何操作来防止边距折叠：
浮动任何一个div元素 使您的任一div元素内联块 * 设置overflow为#outer``auto（或除 以外的任何值visible）
div
overflow
#outer``auto
visible
上述选项防止边距折叠的原因是：
浮动框和任何其他框之间的边距不会塌陷（甚至在浮动框与其流入的子代之间也不会塌陷）。 建立新块格式化上下文的元素的边距（例如浮动和具有“溢出”而不是“可见”的元素）不会与它们的流入子代一起折叠。 内联块框的边距不会塌陷（即使是它们的流入子框也不塌陷）。
左右边距的行为与您预期的一样，因为：
水平边距永远不会塌陷。
